<template>
  <div class="common-path">
    <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item
          v-for="(item, index) in activePath"
          :key="item.id + item.path"
        >
          <span v-if="item.redirect === 'noRedirect'" class="no-redirect">{{
            item.menuName
          }}</span>
          <a v-else @click.prevent="handleLink(item)">{{ item.menuName }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: [],
    };
  },
  computed: {
    activePath() {
      return this.$store.getters.getActivePath;
    },
  },
  methods: {
    pathCompile(path) {
      // 解决为id/跳转的情况
      // const { params } = this.$route
      // var toPath = pathToRegexp.compile(path)
      // return toPath(params)
    },
    handleLink(item) {
      if (item.children.length !== 0) {
        if (item.disabled) {
          this.$store.dispatch('setActiveMenuAsyn', [item.path]);
        } else {
          this.$store.dispatch('setActiveMenuAsyn', [item.children[0].path]);
        }
        // this.$CuMenu.onTarget(item.children[0].path, [item.path, item.children[0].path]);
      }
    },
  },
};
</script>

<style scoped lang="less">
  .common-path{
    padding: 10px 0;
  }
</style>
